<script setup>
import { toRefs } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => []
  },
  cols: {
    type: Array,
    required: true,
    default: () => []
  },
  rowKey: {
    type: String,
    required: true
  },
  btmLine: {
    type: Boolean,
    default: true
  }
})
const { data, cols, rowKey, btmLine } = toRefs(props)
const span = Math.floor(24 / cols?.value.length)
</script>
<template>
  <div class="xg-table">
    <van-row class="table-row" :wrap="false" justify="space-around" >
      <van-col class="van-ellipsis header-title" :span="item.span || span" v-for="item in cols" :key="item.title">{{ item.title }}</van-col>
    </van-row>
    <van-row class="table-row" :class="{ 'btm-line': btmLine }" v-for="row in data" :key="row[rowKey]" :wrap="false" justify="space-around">
      <van-col v-for="item in cols" :key="item.title" :span="item.span || span">{{ row[item.key] }}</van-col>
    </van-row>
  </div>
</template>

<style scoped>
.xg-table {
  padding: 10px;
  font-size: 14px;
  background: var(--van-background-2);
}
.header-title {
  font-weight: 600;
}
.table-row {
  padding: 8px 0;
}
.btm-line {
  border-bottom: 1px solid #ddd;
}
</style>
